<template>
  <div class="mains">
    <ul>
      <li v-for="(item,index) in continents" :key='index' @click='setcity(index)'><span>{{item}}</span></li>
    </ul>
  </div>
</template>

<script>
export default {
    props:['active'],
    data(){
      return{
        choice: {},
        activename: this.active,
        continents:['欧洲','亚洲','北美洲','大洋洲','非洲','南美洲'],
        // continents:['Europe','Asia','NorthAmerica']
      }
    },
    methods: {
      setcity(index) {
        //洲的索引
        console.log(index);
        //洲的名字
        // console.log(this.continents[index])
        this.$eventBus.$emit('num',this.continents[index])
        this.$store.commit('rational/setstate',this.continents[index])
        // console.log(this.$store.state.rational.state);
        // this.$emit('changenum',this.activename++)
        this.$eventBus.$emit('changenum',3)
        // console.log(this.$emit('changenum',this.activename++));
        // this.$router.push("http://www.51houniao.com/requirement/destination/countries/"+this.continents[index])
      }
    }
}
</script>

<style lang="scss" scoped>
.mains{
  padding: 2%;
  width: 100%;
}
ul{
  margin-top: 20%;
}
li{
  float: left;
  width: 46%;
  margin: 1%;
  height: 80px;
  background-image: linear-gradient(to right, #d7d2cc 0%, #304352 100%);
}
span{
  font-size: 25px;
  font-family: YouYuan;
  line-height: 55px;
  color: white;
  font-weight: 900;
  float: right;
}
</style>
